<template>
	<view class="">
		<headerSpaceBetweenVue>
			<template #icon>
				<text @click="editArt()">编辑</text>
			</template>
			<template #title>编辑文章</template>
		</headerSpaceBetweenVue>
		<view class="detailBanner">
			<view class="form">
				<input type="text" v-model="formData.title" placeholder="标题(50字)" class="title" maxlength="50" />
				<!-- <te type="text" v-model="formData.content" placeholder="内容" class="content"/> -->
				<textarea rows="10" v-model="formData.content" class="content" maxlength="1000"
					placeholder="内容(1000字)"></textarea>
				<uni-section title="选择分类" type="line">
					<uni-data-select v-if="formData.category" v-model="formData.cate_id"
						:placeholder="formData.category.cate_name" :disabled="true"></uni-data-select>
				</uni-section>
				<uni-section title="文章类型" type="line">
					<radio-group @change="changeType">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in artType"
							:key="item.value">
							<radio :value="item.value" :checked="item.value === formData.type" />
							{{item.name}}
						</label>
					</radio-group>
				</uni-section>
				<uni-section title="隐藏内容" type="line" v-if="formData.type !=1">
					<textarea rows="6" v-model="formData.hide_content" class="content" maxlength="1000"
						placeholder="请输入隐藏内容"></textarea>
				</uni-section>
				<uni-section title="积分数量" type="line" v-if="formData.type == 2">
					<input type="number" value="1" v-model="formData.score" placeholder="请输入积分数量" class="score"
						maxlength="50" /></uni-section>
				<uni-section title="添加图片(最多三张)" type="line">
					<imgUpload :count="count" @obtain_img="obtain_img" :images="formData.images">
					</imgUpload>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiAddArticle,
		apiArtUploadImg,
		apiEditArt,
		apiGetCategory,
		apiReadArt
	} from '@/api/apis';
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import imgUpload from "@/components/linzq-imgUpload/linzq-imgUpload.vue"
	export default {
		data() {
			return {
				count: 3,
				formData: {
					title: '',
					content: '',
					// 隐藏内容
					hide_content: '',
					// 文章积分
					score: 1,
					cate_id: null,
					type: 1,
					images: []
				},
				cateList: [],
				artType: [{
					value: '1',
					name: '直接查看',
					checked: 'true'
				}, {
					value: '3',
					name: '回复查看',
				}, {
					value: '2',
					name: '积分查看',
				}],
				checkType: 0,
				art_id: ''


			};
		},
		onLoad(e) {
			this.cate_id = e.cate_id
			this.art_id = e.id
			this.loadArticle()
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
		},
		components: {
			headerSpaceBetweenVue,
			imgUpload
		},
		methods: {
			obtain_img(res) {
				this.formData.images = res
			},
			tip(content) {
				uni.showToast({
					title: content,
					icon: "none"
				})
			},
			// 编辑文章
			async editArt() {
				if (this.formData.title == "" || this.formData.content == "") {
					this.tip("请将内容输入完整")
					return
				}
				if (this.formData.type == 2 && this.formData.score <= 0) {
					this.tip("积分需大于0")
					return
				}
				if (this.formData.cate_id == null) {
					this.tip("请选择文章分类")
					return
				}
				if (this.formData.type != 1 && this.formData.hide_content == "") {
					this.tip("隐藏内容不能为空")
					return
				}
				await apiEditArt(this.formData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "编辑成功"
						})
						uni.switchTab({
							url: "/pages/mine/mine"
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							position: "bottom"
						})
					}

				})
			},
			// 改变文章分类
			changeCate(e) {
				this.formData.cate_id = e
			}, // 改变文章类型
			changeType: function(evt) {
				for (let i = 0; i < this.artType.length; i++) {
					if (this.artType[i].value === evt.detail.value) {
						this.checkType = i;
						this.formData.type = this.artType[i]['value']
						break;
					}
				}
			},
			async loadArticle() {
				await apiReadArt({
					id: this.art_id
				}).then(res => {
					if (res.data.status == 2) {
						uni.showToast({
							title: "文章已被锁定",
							icon: "none"
						})
						uni.navigateTo({
							url: "/pages/mine/mine"
						});
						return
					}
					this.formData = res.data
					this.formData.images = res.data.images
					this.cate_id = res.data.cate_id
					uni.hideLoading()
					this.loadCateList()
				})
			},
			async loadCateList() {
				await apiGetCategory({
					pid: this.cate_id
				}).then(res => {
					this.cateList = res.data.map((item, index) => {
						item['value'] = item.id
						item['text'] = item.cate_name
						return item
					})
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.detailBanner {
		position: relative;
		padding: 20rpx;
		padding-top: calc(var(--status-bar-height) + 100rpx);

		.form {

			.title,
			.score {
				height: 80rpx;
			}

			.title,
			.content,
			.hide-content,
			.score {
				width: 100%;
				border: 2rpx solid #e5e5e5;
				padding: 10rpx;
				border-radius: 10rpx;
				margin: 10rpx 0;
			}
		}
	}
</style>